<template>
  <!-- 公司设置 -->
  <div>
    <div class="setting-container">
      <div class="app-container">
        <el-card v-loading="loading" class="tree-card">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <!-- 角色管理 -->
            <el-tab-pane label="角色管理" name="first">
              <el-button type="primary" size="small" @click="showDialog = true">
                新增角色
              </el-button>
              <el-table :data="tableData" style="width: 100%">
                <!-- el-table-column 列：通过prop绑定数据中的键 -->
                <!-- 列名：通过label来设置 -->
                <el-table-column
                  type="index"
                  :index="indexFn"
                  label="序号"
                  width="300"
                />
                <el-table-column prop="name" label="名称" width="300" />
                <el-table-column prop="description" label="描述" width="300" />
                <el-table-column prop="address" label="操作">
                  <template #default="{ row }">
                    <el-button
                      type="success"
                      size="small"
                      @click="planRole(row.id)"
                    >
                      分配权限
                    </el-button>
                    <el-button
                      type="primary"
                      size="small"
                      @click="editRoleDetaiFn(row.id)"
                    >
                      编辑
                    </el-button>
                    <el-button
                      type="danger"
                      size="small"
                      @click="delRole(row.id)"
                    >
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!--
                current-page 当前页
                page-sizes 可供选择的每页条数
                page-sizes 每页显示条目个数
                layout 布局控件，决定了显示多少个控件
                total 总条目数
                @size-change 每页条数变化了，切换了每页的条数
                @current-change 当前页变化，改变当前页触发执行
              -->
              <el-pagination
                :current-page="currentPage"
                :page-sizes="[1, 3, 5, 10]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </el-tab-pane>
            <!-- 公司信息 -->
            <el-tab-pane name="second" label="公司信息">
              <!-- 警告信息 -->
              <el-alert
                title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
                type="info"
                show-icon
                :closable="false"
              />
              <!-- 表单 -->
              <el-form label-width="120px" style="margin-top: 50px">
                <el-form-item label="公司名称">
                  <el-input
                    v-model="companyForm.name"
                    disabled
                    style="width: 400px"
                  />
                </el-form-item>
                <el-form-item label="公司地址">
                  <el-input
                    v-model="companyForm.companyAddress"
                    disabled
                    style="width: 400px"
                  />
                </el-form-item>
                <el-form-item label="邮箱">
                  <el-input
                    v-model="companyForm.mailbox"
                    disabled
                    style="width: 400px"
                  />
                </el-form-item>
                <el-form-item label="备注">
                  <el-input
                    v-model="companyForm.remarks"
                    type="textarea"
                    :rows="3"
                    disabled
                    style="width: 400px"
                  />
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
        <!-- 弹层 -->
        <el-dialog
          :title="showTitle"
          :visible="showDialog"
          @close="closeDialog"
        >
          <el-form
            ref="roleForm"
            :model="form"
            :rules="rules"
            label-width="100px"
          >
            <el-form-item label="角色名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入角色名称" />
            </el-form-item>
            <el-form-item label="角色描述" prop="description">
              <el-input
                v-model="form.description"
                placeholder="请输入角色描述"
              />
            </el-form-item>
          </el-form>
          <template #footer>
            <el-button @click="closeDialog">取消</el-button>
            <el-button type="primary" @click="submitRole">确认</el-button>
          </template>
        </el-dialog>
      </div>
    </div>
    <!-- 分配权限的弹层 -->
    <el-dialog
      title="分配权限"
      :visible="showAssignDialog"
      @close="closeAssignDialog"
    >
      <!-- 内容部分 -->
      <el-tree
        ref="tree"
        :data="roleList"
        :props="{ label: 'name' }"
        show-checkbox
        :check-strictly="true"
        :default-checked-keys="permIds"
        node-key="id"
      />
      <template #footer>
        <div style="text-align: right">
          <el-button @click="closeAssignDialog">取消</el-button>
          <el-button type="primary" @click="clickAssign">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { reqGetPermissionList } from '@/api/permission'
import { transListToTreeData } from '@/utils/index'
import {
  getRoleListApi,
  addRoleApi,
  delRoleApi,
  getRoleDetailApi,
  editRoleDetailApi,
  assignPremApi
} from '@/api/setting'
import { getCompanyApi } from '@/api/company'
export default {
  data() {
    return {
      loading: false,
      activeName: 'first',
      tableData: [],
      currentPage: 1,
      total: 0, // 总条数
      page: 1, // 当前页码
      pageSize: 5, // 每页的数据条数
      showDialog: false,
      roleList: [], // 递归好的数据
      roleId: '', // 用来存储当前分配权限的角色id
      showAssignDialog: false, // 分配权限弹层
      permIds: [], //
      form: {
        name: '',
        description: ''
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入角色名称',
            trigger: ['blur', 'change']
          }
        ],
        description: [
          {
            required: true,
            message: '请输入角色描述',
            trigger: ['blur', 'change']
          }
        ]
      },
      companyForm: {
        // 公司详情
        name: '',
        companyAddress: '',
        mailbox: '',
        remarks: ''
      }
    }
  },
  computed: {
    showTitle() {
      return this.form.id ? '编辑角色' : '添加角色'
    }
  },
  async created() {
    this.getRolelist()
    const res = await getCompanyApi(this.$store.state.user.companyId)
    // console.log(res.data)
    this.companyForm = res.data
  },

  methods: {
    indexFn(index) {
      // console.log(index)
      // 每页起始序号从0开始，所以先加1，
      // 每页的第一条数据的序号  = 1 + （页码数 -1） * 数据条数
      return index + 1 + (this.page - 1) * this.pageSize
    },
    async getRolelist() {
      this.loading = true
      const { data } = await getRoleListApi(this.page, this.pageSize)
      this.total = data.total
      // console.log(data)
      this.tableData = data.rows
      this.loading = false
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 每页条数变化了，切换了每页的条数
    handleSizeChange(val) {
      this.pageSize = val
      this.getRolelist()
      // console.log(`每页 ${val} 条`)
    },
    // 当前页变化，改变当前页触发执行
    handleCurrentChange(val) {
      this.page = val
      this.getRolelist()
      // console.log(`当前页: ${val}`)
    },
    // 关闭弹层
    closeDialog() {
      this.showDialog = false
      this.form = {
        name: '',
        description: ''
      }
      this.$refs.roleForm.resetFields()
    },
    // 新增角色and 编辑角色 (弹框确定按钮)
    submitRole() {
      this.$refs.roleForm.validate(async (valid, val) => {
        if (!valid) return
        if (this.form.id) {
          // 编辑接口
          await editRoleDetailApi(this.form)
          this.$message.success('修改成功')
        } else {
          // 添加接口
          await addRoleApi(this.form)
          this.$message.success('添加成功')
        }

        this.showDialog = false
        // 添加成功，从新渲染角色列表
        this.getRolelist()
        this.form = {
          name: '',
          description: ''
        }
        this.$refs.roleForm.resetFields()
      })
    },
    // 删除角色
    delRole(id) {
      this.$confirm('此操作将永久删除，是否继续？', '温馨提示')
        .then(async () => {
          await delRoleApi(id)
          this.$message.success('删除成功')
          console.log(this.tableData)
          // 当前表格长度是否为1，为1页码--，当前页是不是第一页，如果不是第一页，页码才--
          if (this.tableData.length === 1 && this.page > 1) {
            this.page--
          }

          // 删除成功，从新渲染角色列表
          this.getRolelist()
        })
        .catch(() => {
          console.log('点击了取消')
        })
    },
    // 编辑
    async editRoleDetaiFn(id) {
      this.showDialog = true
      const { data } = await getRoleDetailApi(id)
      // console.log(data)
      this.form = data
    },
    // 分配权限
    async planRole(id) {
      this.roleId = id
      this.showAssignDialog = true
      const res = await reqGetPermissionList()
      const red = transListToTreeData(res.data, '0')
      this.roleList = red
      this.permIds = []
      const rea = await getRoleDetailApi(id)
      this.permIds = rea.data.permIds
      console.log(this.permIds)
    },
    // 关闭分配权限弹层
    closeAssignDialog() {
      this.showAssignDialog = false
    },
    // 给角色分配权限
    async clickAssign() {
      const permIds = this.$refs.tree.getCheckedKeys()
      const data = { id: this.roleId, permIds }
      await assignPremApi(data)
      this.$message.success('分配成功')
      this.showAssignDialog = false
    }
  }
}
</script>
<style scoped></style>
